<template>
  <el-form-item :label="label" :prop="prop"
    :rules="!readonly ? (rules || [{ required: required, message: `${label}不能为空`, trigger: 'blur' }]) : null"
    :class="{ 'readonly-form-item': readonly }">
    <!-- 只读状态显示 -->
    <span v-if="readonly" class="readonly-content">
      {{ readOnlyText }}
    </span>

    <!-- 可编辑状态显示 -->
    <el-input v-else :model-value="modelValue" @update:modelValue="handleInput" :disabled="disabled"
      :placeholder="placeholder || `请输入${label}`" :maxlength="inputMaxLength" :show-word-limit="showWordLimit"
      :type="inputType" clearable :style="{width: inputFrameWidth}" />
  </el-form-item>
</template>

<script>
import { readonly } from 'vue';
import { Definition } from '../../engine/common/definition';
import { Util } from '../../utils/util';
export default {
  name: 'InputWidgetWeb',
  props: {
    modelValue: {
      type: [String, Number],
      required: true
    },
    label: {
      type: String,
      default: '输入项'
    },
    prop: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    required: {
      type: Boolean,
      default: false
    },
    rules: {
      type: Array,
      default: null
    },
    maxlength: {
      type: Number,
      default: null
    },
    showWordLimit: {
      type: Boolean,
      default: false
    },
    numberMode: {  // 可选：新增数字输入模式
      type: Boolean,
      default: false
    },
    precision: {  // 可选：数字模式时，数字精度
      type: Number,
      default: null
    },
    remarkMode: {
      type: Boolean,
      default: false
    },
    isFundType: {
      type: Boolean,
      default: false
    },

    inputFrameWidth: {  // 输入框宽度
      type: [String, Number],
      default: '400px'
    }

  },

  //
  emits: ['update:modelValue'],

  computed: {
    inputType() {
      return this.remarkMode ? 'textarea' :
        this.numberMode ? 'number' :  // 可扩展其他类型
          'input'
    },

    readOnlyText() {
      return this.isFundType ? Util.getFundString(this.modelValue || 0) : (this.modelValue || '-')

    }
  },

  // 
  methods: {
    handleInput(value) {
      if (this.numberMode) {
        // value 转换为number
        try {
          value = Number(value)
          if (this.precision) {
            value = Util.convertWithPrecision(value, this.precision, true)
          }
        } catch (e) {
          console.error("InputWidgetWeb handle number input error: ", e);
        }

      }
      this.$emit('update:modelValue', value)
    },

    inputMaxLength() {
      if (this.maxLength) {
        return this.maxLength;
      } else {
        return this.remarkMode ? Definition.maxTextLenForRemark : Definition.maxTextLenForCommonTextfield;
      }
    },
  }
}
</script>

<style scoped>
/* 只读状态下的表单项目样式 */
.readonly-form-item :deep(.el-form-item__label) {
  font-size: 13px;
  /* 调小label字体 */
  color: #909399;
  /* 灰色文字 */
}

.readonly-content {
  display: flex;
  align-items: center;
  width: 400px;
  padding: 0 10px;
  height: 40px;
  font-size: 15px;
  /* 比原来稍大的字体 */
  color: #303133;
  /* 更深的文字颜色 */
  vertical-align: middle;
  margin-top: -5px;
}

/* 取消只读状态下的必填标记 */
.readonly-form-item :deep(.el-form-item__label::before) {
  content: none !important;
}
</style>